<template>
  <div class="q-box">
    <n-thing>
      <!-- <template #avatar>
        <n-avatar>
          <n-icon>
            <cash-icon />
          </n-icon>
        </n-avatar>
      </template> -->
      <template #header v-if="props.anaType == 'all'">
        <n-h3> 第{{ props.index + 1 }}题：{{ props.title }} </n-h3>
      </template>
      <template #header-extra>
        <div
          v-if="
            props.type === 'q-fill' ||
            props.type === 'eq-fill' ||
            props.type === 'q-locate'
          "
        >
          <n-button @click="getFdata(props.id)"> 点击查看具体数据 </n-button>
          <n-modal v-model:show="showModal">
            <n-card
              style="width: 60vw"
              title="填空题数据"
              :bordered="false"
              size="huge"
              closable
              @close="showModal = false"
            >
              <fdata :fdata="fdata" />
            </n-card>
          </n-modal>
        </div>
        <n-row v-else>
          <div
            :class="{ isX: props.anaType !== 'all' }"
            style="display: inline-block; margin-top: 5px; font-size: 16px"
          >
            <n-popover
              trigger="hover"
              v-if="show == 's-table'"
              placement="bottom"
            >
              <template #trigger>
                <n-button
                  text
                  style="position: relative; left: 13vw; top: 7vh"
                  @click="down"
                >
                  <n-icon :depth="2" size="19">
                    <download />
                  </n-icon>
                </n-button>
              </template>
              <span>下载表格</span>
            </n-popover>
            图表类型选择：
          </div>
          <n-select
            v-model:value="show"
            style="width: 7vw"
            placement="bottom"
            :options="props.anaType === 'all' ? chartTypes : chartTypes2"
          >
          </n-select>
        </n-row>
      </template>
      <template
        v-if="props.remark !== '' && props.anaType == 'all'"
        #description
      >
        描述：{{ props.remark }}
      </template>
      <div
        class="graph"
        v-if="
          props.type !== 'q-fill' &&
          props.type !== 'eq-fill' &&
          props.type !== 'q-locate'
        "
      >
        <ana-table
          :type="props.anaType"
          :options="props.options"
          :values="props.values"
          :number="props.number"
          :options2="props.options2"
          :data="props.tdata"
          v-if="show === 's-table'"
        />
        <ana-pie
          :options="props.options"
          :values="props.values"
          :number="props.number"
          v-else-if="show === 's-pie'"
        />
        <bar-v
          :type="props.anaType"
          :options="props.options"
          :values="props.values"
          :number="props.number"
          :options2="props.options2"
          :data="props.bdata"
          v-else-if="show === 's-bar-v'"
        ></bar-v>
        <!--        <bar-v :x="fakeX" :y="fakeY" :dataX="fake1" :dataY="fake11"></bar-v>-->
        <bar-h
          :type="props.anaType"
          :options="props.options"
          :values="props.values"
          :number="props.number"
          :options2="props.options2"
          :data="props.bdata"
          v-else-if="show === 's-bar-h'"
        ></bar-h>
        <!--        <bar-h :x="fakeX" :y="fakeY" :dataX="fake1" :dataY="fake11"></bar-h>-->
        <ana-line
          :options="props.options"
          :values="props.values"
          :number="props.number"
          v-else-if="show === 's-line'"
        />
        <!--        <ana-line :x="fakeX" :y="fakeY" :dataX="fake1" :dataY="fake11" />-->
      </div>
    </n-thing>
  </div>
</template>

<script setup lang="ts">
import { FlashOutline as CashIcon, DownloadOutline } from '@vicons/ionicons5';
import { Download } from '@vicons/carbon';
import { ref } from 'vue';
import AnaLine from './AnaLine.vue';
import BarH from './AnaBarH.vue';
import BarV from './AnaBarV.vue';
import AnaPie from './AnaPie.vue';
import AnaTable from './AnaTable.vue';
import Fdata from './Fdata.vue';
import { Ques } from '@api/question';
import { useMessage } from 'naive-ui';

const message = useMessage();

const props = defineProps({
  anaType: {
    //判断是交叉分析还是统计分析
    type: String,
    required: true,
  },
  title: {
    //题目
    type: String,
    default: '',
  },
  index: {
    //题号
    type: Number,
    default: 0,
  },
  remark: {
    //提示
    type: String,
    default: '',
  },
  options: {
    //选项
    type: Array,
    default: [],
  },
  values: {
    //选择人数
    type: Array,
    default: [],
  },
  number: {
    //作答人数
    type: Number,
    required: true,
  },
  options2: {
    type: Array,
    default: [],
  },
  bdata: {
    type: Array,
    default: [],
  },
  tdata: {
    type: Array,
    default: [],
  },
  id: {
    //题目id
    type: Number,
    default: 0,
  },
  type: {
    //题目类型
    type: String,
    default: '',
  },
  qId: {
    //问卷ID
    type: Number,
  },
  selectX: {
    type: Number,
  },
  selectY: {
    type: Number,
  },
});
//获取填空题数据
const showModal = ref(false);
const fdata = ref([]);
const getFdata = (id: number) => {
  showModal.value = true;
  Ques.getFdata({
    questionId: id,
  }).then((res: any) => {
    console.log('res', res);
    console.log('-------res-------');
    if (res.data.status === 200) {
      fdata.value = res.data.data.fdata;
      console.log('fdata.value', fdata.value);
    }
  });
};
// 更换形式
// 表格数据
const show = ref('s-table');
const updateShow = (value: string) => {
  show.value = value;
};
const down = () => {
  if (props.anaType == 'all') {
    Ques.getAnalysis({ questionId: Number(props.id) })
      .then((res: any) => {
        if (res.data.status == 200) {
          var url =
            'http://59.110.170.162:8090/api/q/analysis/result/download?fileName=' +
            res.data.data.fileName +
            '&filePath=' +
            res.data.data.filePath;
          window.open(url);
        } else if (res.data.status == 400) {
        } else {
        }
      })
      .catch((error: any) => {
        message.error(error);
      });
  } else {
    Ques.getAnalysisX({
      id: Number(props.qId),
      x: props.selectX,
      y: props.selectY,
    })
      .then((res: any) => {
        if (res.data.status == 200) {
          var url =
            'http://59.110.170.162:8090/api/q/analysis/result/download?fileName=' +
            res.data.data.fileName +
            '&filePath=' +
            res.data.data.filePath;
          window.open(url);
        } else if (res.data.status == 400) {
        } else {
        }
      })
      .catch((error: any) => {
        message.error(error);
      });
  }
};
const chartTypes = [
  //统计分析
  {
    label: '表格',
    value: 's-table',
  },
  {
    label: '条形图',
    value: 's-bar-h',
  },
  {
    label: '柱状图',
    value: 's-bar-v',
  },
  {
    label: '折线图',
    value: 's-line',
  },
  {
    label: '饼图',
    value: 's-pie',
  },
];

const chartTypes2 = [
  //交叉分析
  {
    label: '表格',
    value: 's-table',
  },
  {
    label: '条形图',
    value: 's-bar-h',
  },
  {
    label: '柱状图',
    value: 's-bar-v',
  },
];
</script>

<style scoped lang="scss">
.q-box {
  min-height: 5vh;
  padding: 5vh;
  .graph {
    width: 50vw;
    margin: 0 auto;
  }
}
.isX {
  margin-left: 43vw;
}
</style>
